<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@layer</title>
    <style>
      @layer type, parent-layer;
      @layer parent-layer {
        .box h3 {
          color: black;
        }
        @layer child-layer {
          .box h3 {
            color: green;
          }
          .box p {
            color: red;
          }
        }
      }
      @layer type {
        .box p {
          font-weight: bold;
          font-size: 1.3em;
          color: green;
        }
      }
      p {
        color: rebeccapurple;
      }
      p {
        font-size: 12px;
      }
      #content p {
        font-size: 13px;
      }
      .article {
        font-size: 14px;
      }
      p.article {
        font-size: 15px;
      }
      a {
        color: black;
      }
      a:link {
        color: green;
      }
      a:visited {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <a>跳转</a>
    <div id="content" class="box">
      <p class="article">test</p>
      <!-- <h3>wahaha</h3>
      <input disabled id="a" />
      <p>Hello, world!</p> -->
    </div>
  </body>
</html>
